<template>
    <el-dialog :model-value="visible" :title="title" width="500px" @update:model-value="$emit('update:visible', $event)"
        :close-on-click-modal="false">
        <!-- 弹窗内容 -->
        <div class="dialog-content">
            <el-alert :title="alertTitle" type="warning" :closable="false" show-icon style="margin-bottom: 20px;" />
            <!-- 【核心修正】使用 mainDescription prop 来显示主要的描述文字 -->
            <p class="main-description" v-html="mainDescription"></p>
            <p class="prompt-message">
                {{ promptPrefix }}
                <span class="confirm-phrase-highlight">{{ confirmPhrase }}</span>
            </p>
            <el-input v-model="inputValue" :placeholder="`请输入“${confirmPhrase}”`" @keyup.enter="handleConfirm" />
        </div>

        <!-- 弹窗底部按钮 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="$emit('update:visible', false)">取 消</el-button>
                <el-button type="primary" @click="handleConfirm" :disabled="isConfirmDisabled" :loading="loading">
                    确 定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const props = defineProps({
    visible: { type: Boolean, required: true },
    title: { type: String, default: '确认操作' },
    alertTitle: { type: String, default: '操作提示' },
    mainDescription: { type: String, required: true }, // 主要的描述文字
    promptPrefix: { type: String, default: '请确认操作，请输入：' }, // 提示文字的前缀
    confirmPhrase: { type: String, required: true }, // 需要用户输入的短语
    loading: { type: Boolean, default: false },
});

const emit = defineEmits(['update:visible', 'confirm']);

const inputValue = ref('');

// 计算属性，判断确认按钮是否应该被禁用
const isConfirmDisabled = computed(() => {
    return inputValue.value !== props.confirmPhrase;
});

// 监听弹窗的显示状态，如果弹窗打开，就清空输入框
watch(() => props.visible, (newValue) => {
    if (newValue) {
        inputValue.value = '';
    }
});

const handleConfirm = () => {
    if (!isConfirmDisabled.value) {
        emit('confirm');
    }
};
</script>

<style scoped>
/* 样式调整 */
.main-description {
    margin-bottom: 20px;
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
}

.prompt-message {
    margin-bottom: 10px;
    font-size: 14px;
    color: #303133;
}

.confirm-phrase-highlight {
    color: var(--el-color-primary);
    /* 使用醒目的橙色 */
    font-weight: bold;
}
</style>